<template>
  <div>
    <VolBox
      :lazy="true"
      :model.sync="model"
      title="会员优惠"
      :height="500"
      :width="1000"
      :padding="15"
    >
      <VolBox
        :lazy="true"
        :model.sync="models"
        title="会员"
        :height="450"
        :width="800"
        :padding="15"
      >
        <vol-table
          ref="table_two"
          :loadKey="true"
          :columns="columnsMember"
          :height="450"
          :index="true"
          :click-edit="true"
          :tableData="tableDataMember"
          :paginationHide="true"
          :columnIndex="false"
          :ck="false"
        ></vol-table>
        <div slot="footer">
          <Button type="success" @click="getFirstRow">保存</Button>
          <Button type="info" @click="close(2)">关闭</Button>
        </div>
      </VolBox>
      <VolHeader
        icon="md-apps"
        text=""
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        v-if="isHid"
      >
        <div slot="content"></div>
        <slot>
          <div class="header_box" style="display: flex">
            <div class="header_form">
              <VolForm
                ref="myform"
                :loadKey="loadKey"
                :formFileds="formFileds"
                :formRules="formRules"
                :label="100"
              ></VolForm>
            </div>
            <div class="header_btn">
              <Button
                type="info"
                ghost
                @click="searchClick()"
                style="margin-left: 20px"
                >添加</Button
              >
              <Button
                type="info"
                ghost
                @click="delClick"
                style="margin-left: 20px"
                >删除</Button
              >
            </div>
          </div>
        </slot>
      </VolHeader>

      <!-- table数据 -->
      <!-- :max-height="450" -->
      <vol-table
        ref="table"
        :loadKey="true"
        :columns="columns"
        :height="400"
        :index="true"
        :click-edit="true"
        :tableData="tableData"
        :paginationHide="true"
        :columnIndex="false"
        :ck="true"
      ></vol-table>
      <div slot="footer" v-if="isHid">
        <Button type="success" @click="getFirstRows">保存</Button>
        <Button type="info" @click="close(1)">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isHid: true, //会员优惠是否为第一次添加 true 是
      list: [],
      type: "",
      goodName: "",
      // 查询表单
      loadKey: true,
      productID: "",
      formFileds: {
        type: [],
        goodName: null,
        timeContainer: [],
      },
      formRules: [
        [
          {
            dataKey: "offerType",
            data: [],
            orginData: [],
            title: "优惠类型",
            colSize: 4,
            field: "type",
            type: "select",
            required: true,
            onChange: (val, item) => {
              console.log("优惠类型选择", val);
              let goodName = this.getFormOption("goodName"); //产品类型
              if (val == "1") {
                this.$set(goodName, "title", "折扣");
                this.$set(goodName, "disabled", false);
                this.$set(goodName, "type", "text");
                this.$set(goodName, "disabled", false);
                this.$set(goodName, "max", 10);
                this.formFileds.goodName = 10;
              } else if (val == "2") {
                this.$set(goodName, "title", "优惠价");
                this.$set(goodName, "disabled", false);
                this.$set(goodName, "type", "decimal");
                this.$set(goodName, "max", "");
                this.formFileds.goodName = 0;
              } else {
                this.$set(goodName, "title", "");
                this.formFileds.goodName = "";
                this.$set(goodName, "disabled", true);
              }
            },
          },
          {
            title: "",
            field: "goodName",
            colSize: 4,
            min: 0,
            max: 10,
            type: "number",
            disabled: true,
          },
          {
            title: "时间",
            required: true,
            field: "timeContainer",
            colSize: 4,
            type: "datetime",
            range: true,
          },
        ],
      ],
      //   表格会员优惠
      //   isSingle: true,
      tableData: [],
      columns: [
        {
          field: "distri_product_id",
          title: "产品id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
          sortable: true,
        },
        {
          field: "start_time",
          title: "开始时间",
          type: "datetime",
          width: 220,
          align: "left",
          sortable: true,
        },
        {
          field: "end_time",
          title: "结束时间",
          type: "datetime",
          width: 220,
          align: "left",
          sortable: true,
        },
        {
          field: "member_name",
          title: "会员等级",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "offer_type_name",
          title: "优惠类型",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
        },

        {
          field: "offer_value",
          title: "优惠价",
          type: "decimal",
          width: 80,
          edit:{ type: "text", keep: true },
          align: "left",
        },
      ],
      //  表格会员
      tableDataMember: [],
      columnsMember: [
        {
          title: "",
          width: 40,
          align: "left",
          render: (h, { row, column, index }) => {
            return h("el-checkbox", {
              props: {
                value: row.check,
                label: "",
              },
              on: {
                input: (value) => {
                  console.log("2", value);
                  console.log("3", row.check);

                  row.check = value;
                },
                change: (value) => {
                  this.handleClick(value);
                },
              },
            });
          },
        },
        {
          field: "distri_product_id",
          title: "产品id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
          sortable: true,
        },
        {
          field: "member_name",
          title: "会员等级",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "offer_type_name",
          title: "优惠类型",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
        },

        {
          field: "offer_value",
          title: "优惠价",
          type: "decimal",
          width: 80,
         
          align: "left",
        },
      ],
      delKeys:[],
      //   弹框
      model: false,
      models: false,
    };
  },
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolHeader: () => import("@/components/basic/VolHeader.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue"),
    VolForm: () => import("@/components/basic/VolForm.vue"),
  },
  created() {},
  methods: {
    // 循环表单并返回数据
    getFormOption(field) {
      let option;
      this.formRules.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },

    // 监听多选框
    handleClick(value) {
      console.log(1, value);
    },
    // 打开弹框
    open(productID, v, index) {
      //  产品 1 商品 2
      console.log(v, index, productID,"v");
      this.isProduct = v;
      if(this.isProduct==2){
        this.index=index
        if(productID.id!=undefined ||productID.spare6!=null){
          this.tableData= productID.spare6==null?[]:JSON.parse(productID.spare6) 
        }else{
          console.log("第二次打开的时候")
          this.tableData=[]
        }
        this.model = true;
      }else{
        this.productID = productID;
        this.http
        .get("/api/distriProducts/GetProductsOfferList", {
          productID:productID
        })
        .then(res => {
          console.log(res);
          if (res.status) {
            this.tableData = res.data;
            this.model = true;
          } else {
            this.$Message.error(res.message);
          }
        })
        .catch(err => {
          this.$Message.error("请求失败");
        });

      }
      // 重置数据
      this.formFileds.type = "";
      this.formFileds.goodName = null;
      this.formFileds.timeContainer = "";
      // 查询会员优惠数据并赋值
    },
    // 添加按钮
    searchClick() {
      console.log("添加按钮");
      this.$refs.myform.validate(() => {
        console.log("进来");
        this.http
          .get("/api/distriProducts/getProductsOfferPrice", {
            productID: this.productID, //产品ID
            startTime: this.formFileds.timeContainer[0], //开始时间
            endTime: this.formFileds.timeContainer[1], //结束时间
            offerType: this.formFileds.type, //优惠类型
            offerValue: this.formFileds.goodName, //优惠值
          })
          .then((res) => {
            res.data.forEach((item) => {
              item.check = false;
            });
            this.tableDataMember = res.data;
          });
        this.models = true;
      });
    },
    // 保存按钮外
    getFirstRows() {
      console.log("this.delKeys", this.delKeys);
      if (this.isProduct == 1) {
        let saveModel = {
          delKeys: this.delKeys,
          mainData: {},
          detailData: this.tableData
        };
        this.http
          .post("/api/distriProducts/AddOfferType", saveModel)
          .then(res => {
            if (res.status) {
              this.$Message.success("保存成功");
              this.model = false;
            } else {
              this.$Message.error(res.message);
            }
          });
      } else {
        let row = {
          index: this.index,
          spare6: this.tableData
        };
        console.log(row,)
        this.$parent.addMemberOffer(row);
        this.model = false;
      }
    },
    // 保存按钮
    getFirstRow() {
        
      this.tableDataMember.forEach((item) => {
        if (item.check) {
          this.tableData.push(item);
        }
      });
      this.$Message.success("保存成功");
      this.models = false;
    },
    // 删除按钮
    delClick() {
     let rows=  this.$refs.table.delRow();
     this.delKeys.push(rows[0].id);
     console.log('rows',rows);
    },
    // 关闭按钮
    close(num) {
      if (num == 1) {
        this.model = false;
        this.delKeys=[];
      } else if (num == 2) {
        this.models = false;
      } else {
        this.model = false;
        this.models = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-cascader {
  line-height: 32px !important;
}
.el-input__inner {
  height: 32px !important;
}
</style>